JavaScript 연산자

값을 계산하고 비교하고 논리적으로 판단하는 도구

산술 대입 비교 논리 삼항 우선순위
CHAPTER 01
산술 연산자
숫자를 계산하는 가장 기본적인 연산자예요. 더하기, 빼기, 곱하기, 나누기!
4가지 기본 연산자
// 덧셈
10 + 5; // 15

// 뺄셈
10 - 5; // 5

// 곱셈
10 * 5; // 50

// 나눗셈
10 / 5; // 2
OUTPUT
실행하세요 →
연산자 우선순위: 곱셈이 덧셈보다 먼저!
// 순서 없이: 왼쪽부터 계산
2 + 3 * 4; // 14 (3*4=12 먼저, 2+12)

// 괄호로 순서 지정
(2 + 3) * 4; // 20 (괄호 먼저!)

// 복잡한 계산
3 - 5 * 6 / 2 + 3; // ?
OUTPUT
실행하세요 →

CHAPTER 02
문자열 연결 (덧셈의 특수 기능)
+는 숫자도 계산하고, 문자도 연결해요!
숫자 + 문자 = 문자 연결
// 숫자만
10 + 5; // 15 (계산)

// 숫자 + 문자
10 + "5"; // "105" (연결!)

// 문자 + 숫자
"내 나이: " + 20; // "내 나이: 20"

// 문자 + 문자
"hello" + "world"; // "helloworld"
OUTPUT
실행하세요 →
⚠️ 주의: 10 + "5" = "105" (계산이 아니라 연결!)
문자와 숫자를 더하면 항상 문자가 돼요!

CHAPTER 03
대입 연산자
=와 산술 연산자를 합친 편리한 문법!
산술 대입 연산자
// ❌ 기존 방법 (길어짐)
let x = 10;
x = x + 5; // 15

// ✅ 대입 연산자 (간단!)
let y = 10;
y += 5; // 15

// 모든 산술 연산자 가능
x -= 3; // x = x - 3
x *= 2; // x = x * 2
x /= 4; // x = x / 4
OUTPUT
실행하세요 →

CHAPTER 04
증감 연산자 (전위 vs 후위)
가장 헷갈리는 연산자! 순서가 중요해요.
++num (전위) vs num++ (후위)
// 전위: 먼저 증가, 그 다음 사용
let num = 10;
let result = ++num; // num이 11로 증가 → 그걸 사용
console.log(result, num); // 11, 11

// 후위: 먼저 사용, 그 다음 증가
let num2 = 10;
let result2 = num2++; // 10을 사용 → 그 다음 11로 증가
console.log(result2, num2); // 10, 11
OUTPUT
실행하세요 →
💡 언제 차이가 날까?
값을 할당할 때만 차이가 난다!
i++++i 혼자 쓸 때는 같아.

CHAPTER 05
비교 연산자
항상 true 또는 false를 반환해요!
대소 비교
5 > 3; // true
5 < 3; // false
5 >= 5; // true (같아도 OK)
5 <= 3; // false
동등(==) vs 일치(===) — 매우 중요!
// == : 값만 같으면 true (타입 무시)
5 == "5"; // true! (숫자와 문자는 다르지만)

// === : 값과 타입이 모두 같아야 true
5 === "5"; // false! (숫자와 문자는 다르다)
5 === 5; // true

// != 와 !== 도 같은 원리
5 != "5"; // false
5 !== "5"; // true
OUTPUT
실행하세요 →
권장: 항상 ===!==를 사용하세요!
==는 예상 못한 버그를 만들어요.

CHAPTER 06
논리 연산자
true/false를 논리적으로 조합해요!
AND (&&) — 둘 다 true여야 true
true && true; // true
true && false; // false
false && true; // false
false && false; // false

// 실제 예: 성인이면서 학생?
(age >= 18) && (isStudent === true)
OR (||) — 하나라도 true면 true
true || true; // true
true || false; // true
false || true; // true
false || false; // false

// 실제 예: WiFi 있거나 모바일 있으면 연결 가능
hasWiFi || hasMobileData
NOT (!) — 반대로 뒤집기
!true; // false
!false; // true

// 실제 예: 바쁘지 않으면 (자유로우면)
!isBusy
OUTPUT
실행하세요 →

CHAPTER 07
삼항 조건 연산자
if/else를 한 줄로!
조건 ? true일 때 : false일 때
// 문법
condition ? valueIfTrue : valueIfFalse;

// 예시 1: 나이 확인
let age = 20;
let status = age >= 18 ? "성인" : "미성년자";
console.log(status); // "성인"

// 예시 2: 점수 판정
let score = 85;
let result = score >= 80 ? "합격" : "불합격";
OUTPUT
실행하세요 →

CHAPTER 08
연산자 우선순위
연산자들이 계산되는 순서를 정확히 알아야 버그가 안 생겨요!
우선순위 순서 (높은 순)
PRIORITY ORDER
순위 연산자 설명 예시
1️⃣ () 괄호 (2+3)*4
2️⃣ ++, -- 후위 증감 i++
3️⃣ ++, -- 전위 증감 ++i
4️⃣ ! NOT !true
5️⃣ *, / 곱셈, 나눗셈 10*2/5
6️⃣ +, - 덧셈, 뺄셈 10+5-2
7️⃣ <, >, <=, >= 대소 비교 age>20
8️⃣ ==, ===, !=, !== 동등/일치 x===5
9️⃣ && AND a&&b
🔟 || OR a||b
1️⃣1️⃣ ? : 삼항 condition?a:b
1️⃣2️⃣ =, +=, -=... 대입 x=10
우선순위 예시
// 예시 1: 곱셈이 덧셈보다 먼저
2 + 3 * 4 = 14 // 3*4=12 먼저, 2+12=14

// 예시 2: 비교가 AND보다 먼저
age > 20 && isStudent
// 1단계: age > 20 (비교)
// 2단계: 결과 && isStudent (AND)

// 예시 3: 확실하지 않으면 괄호!
(2 + 3) * 4 = 20 // 괄호 먼저!
OUTPUT
실행하세요 →
💡 팁: 확실하지 않으면 괄호를 쓰세요!
(2 + 3) * 4 ← 이렇게 명확하게 하는 게 코드 가독성도 좋아요!